<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息</title>
</head>
<link rel="stylesheet" type="text/css" href="../res/static/css/main.css">
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" media="all">
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

<body>
<!-- 头部 -->
<div class="layui-layout layui-layout-admin">
    <div class="layui-header" style="background-color:WhiteSmoke;">
        <div class="layui-logo" style="font-size:20px;">网上售饭系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="welcome.html" style="color: darkmagenta;font-size:15px;">首页</a>
            </li>
        </ul>
    </div>
</div>
<div id="app" class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md3">
        </div>
        <div class="layui-col-md9">
            <table class="layui-table" lay-even lay-skin="nob">
                <thead>
                <tr>
                    <th style="min-width: 50px;">学号</th>
                    <th style="min-width: 50px;">姓名</th>
                    <th style="min-width: 50px;">班级</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>{{stuno}}</td>
                    <td>{{stuName}}</td>
                    <td>{{className}}</td>
                </tr>
                </tbody>
            </table>
        </div><br>
        <table class="layui-table" lay-even lay-skin="nob" id="demo"></table>

    </div>
    <div>
    </div>
</div>
</body>
<script>
    layui.use(['jquery', 'table', 'layer'], function () {
        var $ = layui.$, table = layui.table;
        var layer = layui.layer;

        //订餐历史表格
        table.render({
            elem: '#demo'
            , height: 312
            , url: 'getOrderHistory.action' //数据接口
            , page: true //开启分页
            ,where:{stuno:vm.stuno}
            , cols: [[ //表头
                { field: 'name', title: '菜名', minwidth: 80, sort: true, fixed: 'left' }
                , { field: 'num', title: '数量', minwidth: 80 }
                , { field: 'Tprice', title: '金额', minwidth: 80, sort: true }
                , { field: 'time', title: '时间', minwidth: 80,templet : "<div>{{layui.util.toDateString(d.time, 'yyyy-MM-dd')}}</div>"}
            ]]
            , data: []
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "data": res //解析数据列表
                };
            }
            , skin: 'line' //表格风格
            , even: true
            , page: true //是否显示分页
            , limits: [5, 7, 10],
            limit: 5 //每页默认显示的数量
        });
    });

    var vm = new Vue({
        el: "#app",
        data: {
            'stuno': "...",
            'stuName': "...",
            'className': "..."
        }
    });

    vm.stuno = getParams("stuno");
    vm.stuName = getParams1("stuName");
    vm.className = getParams1("className");
    //获取传过来的值
    function getParams(key) {
        var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    };
    //获取传过来的中文值
    function getParams1(key) {
        var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return decodeURI(r[2]);
        } else {
            return null;
        }
    };
    $(function () {
        //请求个人信息----
        $.ajax({
            url: "getStudent.action",
            dataType: "json",
            data: {
                'stuno': vm.stuno
            },
            type: "POST",
            success: function (req) {
                vm.stuName = req.stuName;
                vm.className = req.className;
            },
            error: function (msg) {
                console.log(msg);
                layer.alert('查询失败', { title: '菜单' }, function (index) {
                    layer.close(index);
                });
            }
        });
    })
</script>

</html>